@import '@/static/css/common.scss';

.goods-item {
    display: flex;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 0 20rpx;
    position: relative;
    box-sizing: border-box;
    height: 306rpx;

    &__rank {
        position: absolute;
        left: 40rpx;
        top: 20rpx;
        z-index: 9;

        image {
            height: 58rpx;
            width: 48rpx;
        }

        &-index {
            background-image: linear-gradient(to bottom, #ff404f, #f70114);
            height: 48rpx;
            width: 48rpx;
            border-radius: 0 0 10rpx 10rpx;
            color: #fff;
            text-align: center;
            line-height: 48rpx;
            font-size: 28rpx;
        }
    }

    &__cover {
        height: 266rpx;
        width: 266rpx;
        position: relative;

        &-pic {
            height: 100%;
            width: 100%;
            border-radius: 10rpx;
        }

        &-tag {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    &__detail {
        display: flex;
        flex-direction: column;
        width: calc(100% - 286rpx);
        margin-left: 20rpx;
        position: relative;

        .flex1 {
            flex: 1;
        }
    }

    &__title {
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 10rpx;
        max-height: 76rpx;
        @include text_ellipsis(1);

        .iconfont {
            color: #ff4200;
            position: relative;
            top: 3rpx;
            margin-right: 4rpx;
            transform: scale(1.2);
            display: inline-block;
        }

        &-tag {
            background-color: #ff4200;
            color: #fff;
            display: inline-block;
            padding: 0 6rpx;
            border-radius: 6rpx;
            margin-right: 6rpx;
            font-size: 20rpx;
        }
    }

    &__lave {
        color: #666;
    }

    &__newcomer-price {
        color: #f70114;
        font-size: 22rpx;
        font-weight: 500;

        &--now {
            font-size: 36rpx;
            margin-left: 5rpx;
        }

        &--original {
            text-decoration: line-through;
            color: #b5b5b5;
            margin-left: 20rpx;
        }

        &--now,
        &--original {
            &::before {
                content: '￥';
                font-size: 24rpx;
            }
        }
    }

    &__footer {
        display: flex;
        align-items: center;
    }

    &__coupon {
        position: relative;
        margin-right: 16rpx;
        background-color: #fd5e48;
        height: 64rpx;
        width: 140rpx;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        view {
            color: #fff;
            font-weight: 500;

            &:first-child {
                font-size: 26rpx;
            }

            &:last-child {
                font-size: 20rpx;
                position: relative;
                top: -4rpx;
            }
        }
    }

    &__grab {
        position: relative;
        flex: 1;
        padding: 0;
        line-height: normal;
        height: 64rpx;
        width: 228rpx;

        &::after {
            border: 0;
        }

        image {
            display: block;
            height: 100%;
            width: 228rpx;
        }

        &-price {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0;
            top: 0;
            height: 60rpx;
            width: 130rpx;

            text {
                color: #e8343d;
                font-weight: 500;

                &:first-child {
                    font-size: 26rpx;
                    position: relative;
                    top: 2rpx;
                    left: 2rpx;
                }

                &:last-child {
                    font-size: 20rpx;
                    position: relative;
                    top: -2rpx;
                }
            }
        }

        &-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 150rpx;
            top: 0;
            height: 64rpx;
            width: 60rpx;
            color: #fff;
            text-align: center;
            font-size: 36rpx;
            letter-spacing: 1rpx;
            font-weight: 500;
        }

        &-btn2 {
            height: 58rpx;
            line-height: 58rpx;
            width: 226rpx;
            color: #fff;
            text-align: center;
            font-size: 28rpx;
            letter-spacing: 1rpx;
            font-weight: 500;
            border-radius: 32rpx;
            background-color: #fe4a2c;
            color: #fff;

            &::after {
                border: 0;
            }
        }
        &-jljBtn{
            color: #fff;
            background-color: #fe4a2c;
            height: 64rpx;
            text-align: center;
            line-height: 64rpx;
            border-radius: 15rpx;
            font-size: 36rpx;
        }
    }

    &__price {
        height: 154rpx;

        image {
            height: 88rpx;
            width: 364rpx;
            position: absolute;
            top: 50rpx;
            left: calc(50% - 182rpx);
        }

        .subsidy {
            position: absolute;
            top: 130rpx;
            width: 200rpx;
            left: calc(50% - 100rpx);
            text-align: center;
            color: #f70114;
            font-weight: bold;
            font-size: 40rpx;

            &::before {
                content: '￥';
                font-size: 28rpx;
            }
        }

        .market {
            position: absolute;
            left: 0;
            top: 90rpx;
            color: #666666;
            font-size: 24rpx;
        }

        .platform {
            position: absolute;
            right: 0rpx;
            top: 90rpx;
            color: #666666;
            font-size: 24rpx;
        }
    }

    &__price2 {
        height: 154rpx;

        image {
            height: 135rpx;
            width: 348rpx;
            position: absolute;
            top: 50rpx;
            left: calc(50% - 174rpx);
        }

        .subsidy {
            position: absolute;
            top: 86rpx;
            width: 200rpx;
            left: calc(50% - 100rpx);
            text-align: center;
            color: #fff;
            font-weight: bold;
            font-size: 28rpx;
            animation: heartBeat 1s infinite linear;

            &::before {
                content: '￥';
                font-size: 28rpx;
            }
        }

        @keyframes heartBeat {
            0% {
                transform: scale(1);
            }

            15% {
                transform: scale(1.2);
            }

            30% {
                transform: scale(1);
            }

            45% {
                transform: scale(1.2);
            }

            60% {
                transform: scale(1);
            }
        }

        .market {
            position: absolute;
            left: 10rpx;
            top: 80rpx;
            color: #666666;
            font-size: 24rpx;
        }

        .platform {
            position: absolute;
            right: 10rpx;
            top: 80rpx;
            color: #666666;
            font-size: 24rpx;
        }
    }

    &__state--used {
        position: absolute;
        right: 20rpx;
        top: calc(50% - 60rpx);

        image {
            height: 100rpx;
            width: 100rpx;
        }
    }

    &__state--finished {
        position: absolute;
        left: 20rpx;
        top: 25rpx;
        height: 270rpx;
        width: 270rpx;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;

        text {
            display: block;
            border: 4rpx solid #fff;
            color: #fff;
            height: 120rpx;
            width: 120rpx;
            border-radius: 120rpx;
            line-height: 120rpx;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.3);
            transform: rotate(-30deg);
            font-size: 30rpx;
            box-sizing: border-box;

            &::after {
                content: '';
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                left: -18rpx;
                top: -18rpx;
                border-radius: 120rpx;
                padding: 2rpx;
                border: 16rpx solid rgba(0, 0, 0, 0.3);
            }
        }
    }

    &.is-disabled {
        .goods-item__grab {
            text {
                color: #999;
            }
        }
    }
}
